<template>
  <div>
    <van-nav-bar @click-left="onClickLeft"
      style="background: #1183FD;height: 60px; position:fixed; width: 100vw; top: 0;">
      <template v-slot:title>
        <div style=" color: #fff;font-size: 14px;">直播</div>
      </template>
      <template v-slot:left>
        <van-icon name="arrow-left" style=" color: #fff;font-size: 16px;"></van-icon>
      </template>
    </van-nav-bar>
    <div class="live_tab">
      <span :class="data.on === index ? 'live_title' : ''" v-for="(item, index) in data.title" :key="index"
        @click="onTab(item, index)">
        {{ item }}
      </span>
    </div>
  </div>
  <div class="list">
    <div class="live_list" v-for="(item, index) in data.LiveData" :key="index" @click="onlive(item)">
      <div class="list_img">
        <img
          src="https://img1.baidu.com/it/u=2578525278,2681164481&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1701536400&t=8ab642e3595e9e65e051babebfad9865"
          mode="scaleToFill" />
        <!-- <uni-icons class="loves" type="videocam-filled" color="white" size="40"></uni-icons> -->
        <van-icon class="loves" color="white" size="40" name="live" />
        <text :class="item.status == 1 ? 'list_status' : ''">{{ item.status == 1 ? '正在直播' : '精彩回放' }}</text>
      </div>
      <div class="list_title">{{ item.title }}</div>
      <div class="list_icon">
        <!-- <uni-icons type="videocam" color="grey" size="25"></uni-icons> -->
        <van-icon name="live" color="grey" size="20" />
        <text class="list_time">2023-11-27 14:12:11</text>
      </div>
    </div>
  </div>
  <!-- 开播 -->
  <div class="live_box">
    <van-icon name="live" />
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { get_liveData } from '../../api/index'
import { useRouter, useRoute } from 'vue-router'
// console.log(useRoute(),useRouter());
const router = useRouter()


interface newarrType {
  create_time: string
  end_time: string
  hot: string
  id: number
  img: string
  ischeck: number
  name: string
  sales: string
  sell: string
  status: number
  title: string
  watch: string
}
const onClickLeft = () => history.back();
const data: any = reactive({
  LiveData: [],
  newData: [],
  title: ['全部直播', '正在直播', '精彩回放'],
  on: 0
})
// tab切换
const onTab = async (item: any, index: number) => {
  data.on = index
}
//接收返回数据
let newArr: Array<newarrType> = []
const getData = async (status: string = '3', pageCount: number = 1, pageSize: number = 100) => {
  if (newArr.length === 0) {
    const res1 = await get_liveData(status = '0', pageCount, pageSize)
    const res2 = await get_liveData(status = '1', pageCount, pageSize)
    newArr = randomSortArray([...res1.data.data, ...res2.data.data,])
    // for (let i = 0; i < 12000; i++) {
    // newArr.push( ...res1.data.data,...res2.data.data)
    // }//测试数据
    data.newData = newf(newArr)
    console.log(data.newData);
  }
  if (status === '0') {

  } else if (status === '1') {

  } else {

  }
  renderLive()
}
// 跳转到直播
const onlive = (item: any) => {
  console.log(item.status);
  if (item.status === 0) {
    router.push({
      path: '/video',
      query: {
        item: JSON.stringify(item)
      }
    })
  } else {
    router.push({
      path: '/liver',
      query: {
        item: JSON.stringify(item)
      }
    })
  }

}
getData()
// 渲染
function renderLive(page: number = 0) {
  if (page >= data.newData.length) {
    return
  }
  requestAnimationFrame(() => {
    data.LiveData = [...data.LiveData, ...data.newData[page]]
    page++
    renderLive(page)
  })

}
// 打乱数组
function randomSortArray(arr: Array<newarrType>) {
  var stack = [];
  while (arr.length) {
    //Math.random()：返回 [0,1) 之间的一个随机数
    let index = Math.floor(Math.random() * arr.length);  // 利用数组长度生成随机索引值
    stack.push(arr[index]);  // 将随机索引对应的数组元素添加到新的数组中
    arr.splice(index, 1);  // 删除原数组中随机生成的元素
  }
  return stack;
}
const newf = (arr: Array<newarrType>, sun: any = 10) => {
  let newda = []
  let i = 0
  while (i <= arr.length) {
    newda.push(arr.slice(i, i + sun))
    i = i + 10
  }
  return newda
}
</script>

<style scoped lang="scss">
.live_tab {
  background: #ffffff;
  position: fixed;
  display: flex;
  top: 60px;
  justify-content: space-around;
  padding: 10px 3px;
  z-index: 999;
  width: 98vw;
  left: 0;

  span {
    padding: 3px 25px;
    background: #ececec;
    border-radius: 4px;
    color: rgb(45, 45, 45);
    border: 1px solid #E8E8E8;
    // margin-left: 15rpx;
  }

  .live_title {
    background: #FFF2F3;
    box-sizing: border-box;
    border: 1px solid #FF4F61;
    color: #FF4F61;

  }
}

.list {
  // padding-top: 70px;
  margin-top: 100px;
  height: calc(100vh - 100px);
  padding: 5px;
  overflow: scroll;

}

.live_list {
  padding: 10px;
  background: #f0f0f0;
  border-radius: 6px;
  margin-top: 15px;
}

.list_img {
  position: relative;
  width: 100%;
  height: 150px;

  img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
  }

  text {
    position: absolute;
    left: 1px;
    top: 5px;
    background: #98AAD8;
    color: white;
    font-size: 12px;
    padding: 7.5px 25px;
    border-radius: 25px;
  }

  .loves {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: white solid 2.5px;
    border-radius: 35px;
    line-height: 60px;
    text-align: center;
  }

  .list_status {
    background: linear-gradient(to right, #FB9F68, #FA7566);
  }

}

.list_title {
  font-size: 13px;
  font-weight: bold;
  line-height: 40px;
}



.list_icon {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 25px;
  font-size: 12px;
  color: grey;
}

.live_box {
  width: 70px;
  height: 70px;
  border-radius: 70px;
  background: #169BD5;
  position: fixed;
  bottom: 30px;
  right: 30px;
  text-align: center;

  :nth-child(1) {
    line-height: 70px;
    color: #48CFE5;
    font-size: 40px;
  }
}
</style>